<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script src="js/mootools-release-1.11.js" type="text/javascript" charset="utf-8"></script>
<script src="js/windoo.r114.js" type="text/javascript" charset="utf-8"></script>


<title>Insert title here</title>
<script type="text/javascript">//<![CDATA[

window.addEvent('domready',function() {

		$('resize').makeResizable({ resizeLimit: { x: [50, 250] }, grid:50, preserveRatio: true, direction:"south east" });
});

//]]></script>
<style type="text/css">
.container {
	position:relative;
	height:450px;
	border:dashed #aaa 1px;
	margin-bottom:20px;
	padding:0;
	overflow:visible;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.resize {
	display:block;
	position:absolute;
	width:350px;
	height:170px;
	padding:.5em;
	background:#111;
	border:solid #555 1px;
	overflow:hidden;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#resize {
	top:30px;
	left:30px;
}
#resize2 {
	top:250px;
	left:30px;
}
#resize3 {
	top:30px;
	left:50px;
	width:70px;
	height:170px;
}
#resize4 {
	top:30px;
	left:250px;
	width:70px;
	height:170px;
}

.scroll {
	overflow:auto;
	padding:0 .3em;
	height:100%;
}

.ghost-sizer {
	border:dashed yellow 1px;
	position:absolute;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.sizer {
	display:none;
	position:absolute;
	overflow:hidden;
}
.sizer-visible .sizer {
	background:#0a0;
	display:block;
}

.sizer-north {
	top:0;
	left:0;
	width:100%;
	height:4px;
	cursor:n-resize;
}
.sizer-south {
	bottom:0;
	left:0;
	width:100%;
	height:4px;
	cursor:s-resize;
}
.sizer-west {
	top:0;
	left:0;
	height:100%;
	width:4px;
	cursor:w-resize;
}
.sizer-east {
	top:0;
	right:0;
	height:100%;
	width:4px;
	cursor:e-resize;
}
.sizer-nw,
.sizer-ne,
.sizer-sw,
.sizer-se {
	width:4px;
	height:4px;
}
.resize4 .sizer-nw,
.resize4 .sizer-ne,
.resize4 .sizer-sw,
.resize4 .sizer-se {
	width:6px;
	height:6px;
}
.sizer-nw {
	top:0;
	left:0;
	cursor:nw-resize;
}
.sizer-ne {
	top:0;
	right:0;
	cursor:ne-resize;
}
.sizer-sw {
	bottom:0;
	left:0;
	cursor:sw-resize;
}
.sizer-se {
	bottom:0;
	right:0;
	cursor:se-resize;
}

</style>
</head>
<body>

<textarea id="resize"></textarea>
</body>
</html>